<template>
  <div id="introduced">
    <!--搜索-->
    <div class="searchWrap">
      <div class="searchCenter">
        <input type="search" :placeholder="text" v-model="inputValues">
      </div>
      <span @click="search()" class="fl">搜索</span>
    </div>
    <!--搜索-->
    <div class="searchCache clear">
      <!--历史记录-->
      <div class="history clear" v-show="!searchList">
        <p>历史搜索</p>
        <div class="clear">
          <span v-for="(item ,index) in history" :key="index"  @click="historySearch(item)">{{item}}</span>
        </div>
      </div>
      <div class="content clear"  v-show="searchList">
        <!--搜索到的东西-->
        <div v-for="item in specials" @click="goodsDetails(item.typeId)" v-show="haveList" :key="index">
          <minArea :name="item.name" :detail="item.detail" :much="item.much"></minArea>
        </div>
        <!--没有-->
        <div class="error hide" v-show="!haveList">
          <img src="../../../../static/images/searchError.png" alt="" mode="aspectFit">
          <p>没有找到合适商品</p>
        </div>
      </div>
    </div>
    <!--版权-->
    <div class="copyRight">
      <p>找玩网</p>
      <p>五朵云.休闲农旅全场景运营服务商 版权所有</p>
    </div>

  </div>
</template>

<script>
  import minArea from '../../../components/minArea'

  export default {
    data () {
      return {
        inputValues: "",
        searchList: false,
        haveList: false,
        text: '搜索商户名称',
        history: [
          "手机",
          "笔记本",
          "生活用品",
          "手机",
          "笔记本",
          "生活用品",
          "手机",
          "笔记本",
          "生活用品"
        ],
        urlId: "",
        specials:[
          {
            name: "2爱婴宝贝(郫县店)婴儿游泳课爱婴宝贝(郫县店)婴儿游泳课",
            detail: '一对一护理，恒温泳池提供免费游乐区',
            much: 80,
            typeId: 1
          },
          {
            name: "2爱婴宝贝(郫县店)婴儿游泳课爱婴宝贝(郫县店)婴儿游泳课",
            detail: '一对一护理，恒温泳池提供免费游乐区',
            much: 80,
            typeId: 1
          }
          ]
      }
    },
    components: {
      minArea
    },
    methods: {
      search: function(){
        if(this.inputValues =="") {
          return;
        }else if(this.inputValues =="手机") {
          this.searchList = true;
          this.haveList = true
        }else  {
          this.searchList = true;
          this.haveList = false
        }
      },
      historySearch: function (inputValues) {
        if(inputValues =="") {
          return;
        }else if(inputValues =="手机") {
          this.searchList = true;
          this.haveList = true
        }else  {
          this.searchList = true;
          this.haveList = false
        }
      },
      goodsDetails: function(typeId){
        wx.navigateTo({
          url: '/pages/hot/goods/main?urlId='+typeId
        })
      }

    },
    computed: {

    },
    onLoad: function(option) {
      /*初始化*/
      this.searchList = false;
      this.haveList = false
    },
    created() {

    }
  }
</script>

<style scoped lang=scss>
  @import "../../../../static/css/index.css";
  .searchWrap{
    height:95rpx;
    width:100%;
    background:#ffffff;
    margin:0;
    padding-top:15rpx;
    .searchCenter {
      height: 80rpx;
      width: 550rpx;
      margin-left: 77rpx;
      border-radius: 80rpx;
      float: left;
      background: url("../../../../static/images/searchIco.png") no-repeat #ececec;
      background-position: 33rpx 22rpx;
      input {
        height: 80rpx;
        line-height: 80rpx;
        width: 420rpx;
        margin-left: 91rpx;
        background: #ececec;
        font-size: 28rpx;
        color: #999999;
        float:left;
      }
    }
    span{
      float: left;
      display: inline-block;
      margin-left: 25rpx;
      color: #7ae5d0;
      font-size: 32rpx;
      height: 80rpx;
      line-height: 80rpx;
    }
  }

  .searchCache{
    background: #ffffff;
    .history {
      div {
        margin: 20rpx;
        span {
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          background: #eeeeee;
          font-size: 30rpx;
          color: #838383;
          margin: 15rpx 20rpx;
          border-radius: 25rpx;
          padding: 0 30rpx;
          float:left;
        }
      }
      p {
        color: #545454;
        font-size: 30rpx;
        margin-top: 20rpx;
        margin-left: 45rpx;
        padding: 20rpx 0;
      }

    }
    .content {
      >div {
        padding-top:20rpx;
        margin-top:20rpx;
      }
    }
    .error{
      text-align: center;
      img{
        width: 295rpx;
        margin-top: 160rpx;
        height: 370rpx;
      }
      p{
        color: #545454;
        font-size: 30rpx;
        margin-top: 10rpx;
      }
    }
  }


  .copyRight{
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    padding: 35rpx 0;
    background: #ffffff;
    p{
      height: 46rpx;
      line-height: 46rpx;
    }
  }
</style>
